<template>
  <div class="classify-aside">
    <div @click="handleChecked(item)" class="classify-aside__item" :class="[{ 'classify-aside__item--checked': item.checked }]" v-for="(item, index) in _options" :key="index">
      {{ item.name }}
    </div>
  </div>
</template>

<script>
export default {
  name: 'classify-aside',
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    options: Array,
    checked: Object
  },
  computed: {
    _options () {
      const options = this.options
      const _checked = this._checked
      options.map(element => {
        if (element.id === _checked.id) {
          element.checked = true
        } else {
          element.checked = false
        }
        return options
      })
      return options
    },
    _checked: {
      get () {
        const checked = this.checked
        return checked
      },
      set (val) {
        this.$emit('change', val)
      }
    }
  },
  methods: {
    handleChecked (item) {
      const _checked = {
        id: item.id,
        name: item.name
      }
      this._checked = _checked
    }
  }
}
</script>

<style lang="less">
  @import "../../common/z-theme/_variable.less";

  .classify-aside {
    flex: none;
    display: block;
    position: relative;
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
  }

  .classify-aside__item {
    position: relative;
    display: flex;
    padding: 15px 10px;
    align-items: center;
    font-size: @--font-size-small;
    color: @--color-text-secondary;
    background-color: @--background-color-base;
    .setTapColor();

    &:before {
      .setActive();
    }

    &:not(.classify-aside__item--checked) {
      &:after {
        .setRightLine(@--border-color-lighter);
      }

      &:active {
        &:before {
          opacity: .08;
        }
      }
    }
  }

  .classify-aside__item--checked {
    background-color: @--fill-base;
    font-weight: @--font-weight-primary;
    color: @--color-text-primary;

    &:after {
      .setRightLine(@--fill-base);
    }
  }

</style>
